<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!--element ui-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入组件库 -->
    <script src="js/index.js"></script>
    <script src="js/axios.min.js"></script>

   <!--  引入样式 -->
   <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--  引入组件库 -->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
</head>
<body>
<div id="app">
    <el-row :gutter="10">
        <el-col :span="4">
            <!--新建品项-->
            <el-button type="primary" @click="addItemTab">新建品项</el-button>
        </el-col>
        <el-col :span="8">
            <el-input v-model="input" placeholder="根据名称查询"></el-input>
        </el-col>
        <el-col :span="12">
            <el-button type="info" @click="handleSelect">查询</el-button>
        </el-col>


    </el-row>
    <el-row>





    </el-row>


    <el-dialog
            :title="tabtitle"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <span><div style="width: 400px;height: 280px">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                         size="mini" border="true">
                    <div :hidden="idHidden">
                       <el-form-item label="品项编号" prop="id" :rules="[{ required: true, message: '编号不能为空'}]">
                        <el-input v-model="ruleForm.id"></el-input>
                    </el-form-item>
                    </div>
                    <el-form-item label="品项名称" prop="name" :rules="[{ required: true, message: '名称不能为空'}]">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="规格单位" prop="specId">
                        <el-select v-model="ruleForm.specId" placeholder="请选择规格"
                                   :rules="[{ required: true, message: '规格不能为空'}]">
                            <div v-for = "item in ItemCa">
                                <el-option :label="item.name" :value="item.id"></el-option>
                            </div>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="品项价格" prop="price" :rules="[{ required: true, message: '价格不能为空'}]">
                        <el-input v-model="ruleForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="desc" :rules="[{ required: false, message: '名称不能为空'}]">
                        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                        <el-button @click="resetForm('ruleForm')" :disabled="buttondisabled">重置</el-button>
                        <el-button @click="closetab">取消</el-button>
                    </el-form-item>
                </el-form>

            </div></span>
       <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="closetab">取 消</el-button>
            <el-button type="primary" @click="addItem">确 定</el-button>
        </span>-->
    </el-dialog>


    <el-divider></el-divider>
    <!--首页查询表单-->
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="品项名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="spec"
                    label="规格单位"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="desc"
                    label="描述">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--分页控件-->
    <el-pagination
            layout="prev, pager, next" @current-change="handleCurrentChange" hide-on-single-page :page-size="pageSize"
            :total="count">
    </el-pagination>


</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            input: '',
            tableData: [],
            ruleForm: {
                id: '',
                name: '',
                specId: '',
                price: 0,
                desc: '',
            },
            rules: {
                name: [
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                region: [
                    {required: true, message: '请选择活动区域', trigger: 'change'}
                ],
                date1: [
                    {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                ],
                date2: [
                    {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
                ],
                type: [
                    {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
                ],
                resource: [
                    {required: true, message: '请选择活动资源', trigger: 'change'}
                ],
                desc: [
                    {required: true, message: '请填写活动形式', trigger: 'blur'}
                ]
            },
            dialogVisible: false,
            buttondisabled:false,
            ItemCa: [],
            url:'',
            idHidden: false,
            tabtitle:'',
            pageSize: 5,
            curr: 0,
            keyword:this.input,
            count: 0
        },
        methods: {
            //查询
            select(curPage){
                var that = this;
                let param = new FormData();
                let cur = curPage - 1 ;
                let key = '';
                if (that.input != null){
                    key = that.input
                }
                param.append("currentPage",cur);
                param.append("keyWord",key);
                param.append("pageSize",that.pageSize);
                axios({
                    method: 'POST',
                    url: '/test',
                    data:param,
                    headers:{
                        "Content-Type":"multipart/form-data"
                    }
                }).then(function (res) {
                    console.log(res.data)
                    if (res.data.code != null &&res.data.code == 0){
                        that.tableData = []
                        that.count=res.data.data.totalCount
                        //that.keyword = ''
                        for (let i = 0; i < res.data.data.dataList.length; i++) {
                            Vue.set(that.tableData, i, res.data.data.dataList[i])
                        }
                    }else if (res.data.code != null && res.data.code == 2){
                        alert("没有数据")
                        that.tableData = [];
                    }else
                        alert("服务器异常")
                });
            },
            //编辑品项
            handleEdit(index, row) {
                var that = this;
                that.url = '/editItem'
                that.ruleForm = that.tableData[index]
                that.buttondisabled = true
                that.dialogVisible = true
                that.idHidden = true
                that.tabtitle = '编辑品项'
                console.log(index, row);
            },
            //删除品项
            handleDelete(index, row) {
               var id =row.id;
                let params = new FormData()
                params.append("id",id);
                var that = this;
                //that.select();
                axios({
                    method: 'POST',
                    data:params,
                    url: "/deleteItemById",
                    headers:{
                        "Content-Type":"multipart/form-data"
                    }
                }).then(function (res) {
                    //console.log(res.data)
                    if (res.data.code == 0){
                        alert("删除成功")
                        that.select(1);
                    }

                })

            },
            /*点击空白处关闭*/
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        var that = this;
                        that.buttondisabled = false
                        that.ruleForm = {
                            name: '',
                            specId: '',
                            price: 0,
                            desc: ''
                        };
                        done();
                    })
                    .catch(_ => {
                        var that = this;
                        that.buttondisabled = false
                    });
            },
            /*点击取消按钮后 关闭新增，编辑窗口*/
            closetab() {
                var that = this;
                that.dialogVisible = false
                that.buttondisabled = false
                that.ruleForm = {
                    name: '',
                    specId: '',
                    price: 0,
                    desc: ''
                };

            },
            addItemTab(){
                console.log("111")
                var that = this;
                that.idHidden = false
                that.url = "/addItem"
                that.dialogVisible = true
                that.tabtitle = '新建品项'
            },
            //新增品项请求后台
            addItem() {
                var that = this
                console.log("addItem success")
                that.dialogVisible = false
            },
            //新增或编辑品项
            submitForm(formName) {
                //alert("新增")
                this.$refs[formName].validate((valid) => {
                    var that = this;
                    if (valid) {
                        // todo
                        let params = new FormData()
                        params.append("id",that.ruleForm.id)
                        params.append("name",that.ruleForm.name)
                        params.append("specId",that.ruleForm.specId)
                        params.append("price",that.ruleForm.price)
                        params.append("desc",that.ruleForm.desc)
                        axios({
                            method: 'POST',
                            data:params,
                            url: that.url,
                            headers:{
                                "Content-Type":"multipart/form-data"
                            }
                        }).then(function (res) {
                            if (res.data.code == null || res.data.code == 1){
                                alert(res.data.msg)
                            }else{
                                alert("成功")
                                that.dialogVisible = false
                                that.ruleForm = {
                                    name: '',
                                    specId: '',
                                    price: 0,
                                    desc: ''
                                };
                                that.select(1);
                            }
                        });


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                var that = this
                that.ruleForm = {
                    name: '',
                    specId: '',
                    price: 0,
                    desc: ''
                };
                this.$refs[formName].resetFields();
            },
            handleCurrentChange(curPage){
                var that =  this;
                that.tableData = []
                that.select(curPage);
                console.log(curPage)
            },
            handleSelect(){
                var that = this;
                this.select(1);
            }
        },
        created: function () {
            let params = new FormData()
            var that = this;
            that.select(1);
            axios({
                method: 'POST',
                url: '/getItemCa',
            }).then(function (res) {
                //console.log(res.data)
                if (res.data.code != null &&res.data.code == 0){
                    for (let i = 0; i < res.data.data.length; i++) {
                        Vue.set(that.ItemCa, i, res.data.data[i])
                    }
                }else {
                    alert("服务器异常")
                }

            })
        }
    })

</script>
</html>